<template>
  <div id="discrimination">
    <div class="trends-header">
      <div class="fr">
        <el-radio-group v-model="plate"
                        @change="plateChange">
          <el-radio-button v-for="item in plates"
                           :key="item.id"
                           :label="item.label"
                           border>{{item.label}}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <f-scroll :scrollStyle="wrapStyle">
      <div class="content">
        <el-row :gutter="10"
                v-show="!articleShow">
          <el-col :span="8"
                  v-for="(item,index) in articles"
                  :key="item.img">
            <div class="image-card"
                 @click="showAirticle(index)">
              <div class="img-wrap">
                <img :src="item.img"
                     alt="">
              </div>
              <div class="desc">
                <div class="title">{{item.title}}</div>
                <div class="subtitle">{{item.subtitle}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </f-scroll>
    <div class="article"
         v-show="articleShow">
      <div class="article-wrap">
        <div class="article-content">
          <h2 class="rich_media_title">{{article.title}}
            <div class="close"
                 @click="articleShow = false">
            </div>
          </h2>
          <div class="rich_media_meta_list">
            <span class="rich_media_meta icon_appmsg_tag default">原创</span>
            <a style="color: #607fa6; margin-right: 10px;"> LuxsensHK</a>
            <span class="rich_media_meta rich_media_meta_text">{{article.time}}</span>
          </div>
          <p class="rich_media_meta_primary rich_media_meta_text">作者&nbsp;
            <span style="color: #607fa6;">{{article.author}}</span>
          </p>
          <div v-for="item in article.content"
               :key="item +  Math.random()*999">
            <div v-if="item[0] == '1'">
              <p>{{item.slice(2)}}</p>
            </div>
            <div v-else-if="item[0] == '2'">
              <img :src="item.slice(2)"
                   alt="">
            </div>
            <div v-else-if="item[0] == '3'">
              <h2 class="h2">{{item.slice(2)}}</h2>
            </div>
          </div>
          <div class="to-top"
               @click="backTop"
               v-show="backTopShow">
            <img src="../../assets/icons/top.png"
                 alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plates: [
        {
          id: 1,
          label: "潮人潮事",
          value: "crcs"
        },
        {
          id: 2,
          label: "慧买慧穿",
          value: "hmhc"
        },
        {
          id: 3,
          label: "旅行秘籍",
          value: "lxmj"
        },
        {
          id: 4,
          label: "品牌百科",
          value: "ppbk"
        },
        {
          id: 5,
          label: "专家辩真",
          value: "zjbz"
        }
      ],
      wrapStyle: {
        height: ""
      },
      plate: "专家辩真",
      current: "zjbz",
      articles: [],
      articleShow: false,
      article: {},
      articleFile: "",
      backTopShow: false
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.setContentHeight();
  },
  methods: {
    setContentHeight() {
      this.$nextTick(() => {
        let dom = document.querySelector("#discrimination");
        let len = document.body.clientHeight - dom.offsetTop;
        this.wrapStyle.height = len - 55 + "px";
        dd(this.wrapStyle.height);
      });
    },
    getData() {
      var local = `http://localhost:8080/static/news/${this.current}.json`;
      var server = `http://bisys.luxsens.com/static/news/${this.current}.json`;
      this.$http.get(server).then(res => {
        this.articles = res;
      });
    },
    plateChange() {
      let plate = this.plates.find(item => item.label === this.plate);
      this.current = plate.value;
      this.getData();
    },
    showAirticle(index) {
      let dom = document.querySelector("#app .article");
      dom.scrollTop = 0;
      dom.addEventListener("scroll", () => {
        if (dom.scrollTop > dom.clientHeight + 100) {
          this.backTopShow = true;
        } else {
          this.backTopShow = false;
        }
      });
      this.article = this.articles[index];
      this.articleShow = true;
    },
    backTop() {
      dd(666);
      let dom = document.querySelector("#app .article");
      let scrollTop = dom.scrollTop;
      let stepValue = scrollTop / 30;
      function step() {
        dom.scrollTop = dom.scrollTop - stepValue;
        if (dom.scrollTop > 0) {
          if (dom.scrollTop > stepValue) {
            requestAnimationFrame(step);
          } else {
            dom.scrollTop = 0;
          }
        }
      }
      requestAnimationFrame(step);
    }
  }
};
</script>

<style lang="scss">
#discrimination {
  padding-bottom: 10px;
  .trends-header {
    margin-top: 3px;
    border-bottom: 2px solid #d3d3d8;
    padding-bottom: 10px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 10px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.4);
    .fr {
      margin-right: 20px;
    }
    .el-button--primary {
      height: 38px;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .image-card {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    .img-wrap {
      width: 100%;
      img {
        width: 100%;
        cursor: pointer;
      }
    }
    .desc {
      text-align: left;
      text-indent: 20px;
      padding-bottom: 10px;
      .title {
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .subtitle {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .article {
    z-index: 20000;
    margin-bottom: 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    .article-wrap {
      background-color: #fff;
    }
    .article-content {
      position: relative;
      text-align: left;
      max-width: 730px;
      margin: 0 auto;
      font-size: 14px;
      color: rgb(89, 89, 89);
      padding-top: 20px;
      padding-bottom: 20px;
      img {
        width: 100%;
      }
      p {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 16px;
      }
      .h2 {
        margin-left: 5px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-top: 20px;
        padding-right: 10px;
        padding-left: 10px;
        font-weight: bold;
        white-space: normal;
        border-left: 5px solid rgb(117, 117, 118);
        line-height: 32px;
        color: rgb(102, 102, 102);
      }
      .rich_media_title {
        padding-bottom: 10px;
        margin-top: 20px;
        margin-bottom: 14px;
        border-bottom: 1px solid #e7e7eb;
        .close {
          position: fixed;
          top: 30px;
          right: 30px;
          float: right;
          width: 30px;
          height: 30px;
          cursor: pointer;
          background-repeat: no-repeat;
          background-image: url("../../assets/icons/close.png");
          &:hover {
            background-image: url("../../assets/icons/close-blue.png");
          }
        }
      }
      .rich_media_meta_text {
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .icon_appmsg_tag {
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #888;
        background-color: transparent;
        padding: 0.3em 0.78em;
        font-size: 14px;
        border-radius: 70%;
        margin-right: 10px;
      }
      .to-top {
        position: fixed;
        z-index: 20001;
        bottom: 100px;
        left: 50%;
        margin-left: 420px;
        cursor: pointer;
      }
    }
  }
}
</style>
